<template>
  <div>
    <!-- 单一文章信息开始 -->
    <div class="articleItem">
      <!-- 文章标题开始 -->

      <!-- 文章标题结束 -->
      <!-- 文章图文信息开始 -->
      <div class="articleItem-wrapper">
        <!-- 文章图像开始  -->
        <!-- 如果有图片就显示图片 没有图片显示默认图片 -->
        <div class="articleImg">
          <img v-if="!city.image" src="img/Tripadvisor_header.svg" />
          <img v-else :src="`img/${city.image}`" />
        </div>
        <!-- 文章图像结束 -->
        <div style="margin-left: 30px">
          <div class="articleItem-header">{{ city.subject }}</div>
          <!-- 文章简介开始 -->
          <div class="articleDes" v-html="city.description">
            {{ city.description }}
          </div>
          <!-- 文章简介结束 -->
          <div class="extra">
            <span class="author" v-if="!city.author">
              <i class="el-icon-user-solid"></i>
              {{ author }}
            </span>
            <!-- <span class="author">
              <i class="el-icon-user-solid"></i>
              {{ $store.state.name }}
            </span> -->
            <span class="author" v-else>
              <i class="el-icon-user-solid"></i>
              {{ city.author }}
            </span>
            <span class="view_counts">
              <i class="el-icon-view"></i>
              {{ city.view_counts }}</span
            >
          </div>
        </div>
      </div>
      <!-- 文章图文信息结束 -->
    </div>
    <!-- 单一文章信息 结束 -->
  </div>
</template>

<script>
export default {
  props: ["city"],
  data() {
    return {
      author: "对方不愿意留下姓名",
      navactive: "1",
    };
  },
};
</script>
<style scoped>
p {
  margin: 0;
  padding: 0;
}
.articleItem {
  padding: 15px 0;
  margin: 0 30px;
  width: 800px;
  border-bottom: 1px solid #e4e4e4;
}
.articleItem-header {
  font-weight: 600;
  font-size: 17px;
  color: #1a1a1a;
  line-height: 22px;
  margin-bottom: 15px;
}
.extra {
  margin-top: 8px;
  color: #666;
}
.author {
  color: #ff9d00;
  margin-right: 15px;
}
i {
  margin-right: 5px;
}
.articleItem-wrapper {
  display: flex;
  align-items: center;
  width: 90%;
}
.articleImg {
  margin-right: 15px;
}
.articleImg img {
  width: 220px;
  height: 150px;
  border-radius: 5px;
}
.articleDes {
  height: 65px;
  font-size: 15px;
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  line-height: 21px;
  letter-spacing: normal;
  color: #444;
}
</style>
